* {margin: 0;padding: 0;}
ul, ol, li {list-style: none;}
.box {width: 600px;height: 400px;border: 10px solid #333;margin: 30px auto; display: flex;flex-direction: column;}
.box > ul { width: 100%;  height: 40px;display: flex; }
.box > ul > li {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 30px;color: #fff;background-color: hotpink;}
.box > ul > li.active {background-color: orange;}
.box > ol {flex: 1;position: relative;}
.box > ol > li {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: skyblue;color: #fff;font-size: 100px;display: flex;justify-content: center;align-items: center;display: none;}
.box > ol > li.active {display: flex;}